- 0.0 Accessibility Training
- 0.1 Who does what
- 0.2 Helpful tools
- 0.3 Checklist
- 0.3 Glossary
- 0.4 Screen readers we support
- 1.0 Buttons and toggles
- 1.0 Bypass blocks
- 1.0 Focus visible
- 1.0 Images and Decorative Elements
- 1.0 Landmark structure
- 1.0 Modals
- 1.0 Non Text Content
- 1.0 Page Title
- 1.0 Tables
- 1.0 Tabs
- 1.0 Test Evidence Spreadsheet
- 1.0 Tooltips
- 1.1 Perceivable - Text alternatives
- 1.2 Perceivable - Time-based media
- 1.3 Perceivable - Adaptable
- 1.4 Perceivable - Distinguishable
- 2.1 Operable - Keyboard accessible
- 2.2 Operable - Enough time
- 2.3 Operable - Seizures and Physical Reactions
- 2.4 Operable - Navigable
- 2.5 Operable - Input Modalities
- 3.1 Understandable - Readable
- 3.2 Understandable - Predictable
- 3.3 Understandable - Input Assistance
- 4.1 Robust - Compatible
Non-Text Content 1.1.1 (A)
Provide equivalent alternative text descriptions for non-text content such as images and multimedia to allow people using assistive technologies to understand and enjoy the content on the page.
Non-text links
###The four types of alternative text that People First uses Foreground images When an element is a foreground image there need to be an alterative text provided to tell a screen reader user what the image is portaying. When the foreground image is only decorative, the alterative text still need to be present but it contain is to be left blank to indicate it is decorative
Background image When an image is set as a background image, the image needs to be defined as an image and given an aria-label to provide screen reader users the information on what the image is portaying. When the background image is only decorative, the aria-label is to be set to hidden to indicate it is decorative.
SVGs When an image is an SVG a Title tag is to be used to provided the screen reader users the information on what the image is portaying. When the SIVG image is only decorative, the Title tag is not be used and instead an aria-label set to hidden is used to indicate it is decorative.
Mobile and Desktop icons When you have text next to the icon on desktop that describes the icons action but this text disappears on mobile. The alternative text needs to which to the item that appears on both desktop and mobile, i.e the icon and the text needs to be hidden from screen readers to stop it reading the icon label and text label out
Other use cases within People First
Person profile image (image here) This has been set as a background image Code for this image: role="img" aria-label="Jackson Kane profile image"
Google Map image (image here) This has been set has an image, with the address provided above the map can be assign a ‘decortive’ item, if the address text wasn’t above the address/location would need to be include within the alt=”” text. Code for this image: alt=""
Icons with no text across both desktop and mobile (Image here) Code for the first icon: title="View person on the org chart"